<template>
  <el-drawer
    v-bind="$attrs"
    v-on="$listeners"
    ref="drawer"
    class="oce-drawer"
    direction="rtl"
    :title="title"
    :visible.sync="showDrawer"
    :modal-append-to-body="false"
    :modal="modal"
    :wrapperClosable="false"
    :style="{ width: size || '30%' }"
    :size="size === '100%' ? '100%' : '95%'"
    :before-close="beforeClose"
    :destroy-on-close="destroyOnClose"
    @open="open"
    @opened="opened"
    @close="close"
    @closed="closed"
  >
    <!-- @slot Drawer 的内容 -->
    <slot></slot>
    <!-- <span>Drawer 的内容</span> -->
  </el-drawer>
</template>

<script>
/**
 * 与element-ui不同处在于，使用绝对定位，可以相对于指定块进行操作（最近开启定位的父元素）。
 */
export default {
  name: 'OceDrawer',
  data() {
    return {
      showDrawer: false,
    }
  },
  props: {
    /**
     * 是否显示蒙版
     */
    modal: {
      type: Boolean,
      default: false,
    },
    /**
     * 修改Title
     */
    title: {
      type: String,
      default: '新增',
    },
    /**
     * 是否显示 Drawer，支持 .sync 修饰符
     */
    visible: {
      type: Boolean,
      default: false,
      required: true,
    },
    /**
     * Drawer 窗体的大小,不带单位传啥是啥
     */
    size: {
      type: String,
      default: '40%',
    },
    destroyOnClose: {
      type: Boolean,
      default: false,
    },
    beforeClose: {
      type: Function,
    },
  },
  watch: {
    showDrawer(val) {
      /**
       * .sync语法糖
       * @property {Boolean}
       */
      this.$emit('update:visible', val)
    },
    visible(val) {
      this.showDrawer = val
    },
  },
  created() {
    this.showDrawer = this.visible
  },
  methods: {
    closeDrawer() {
      this.$refs.drawer.closeDrawer()
    },
    open() {
      /**
       * Drawer 打开的回调
       */
      this.$emit('open')
    },
    opened() {
      /**
       * Drawer 打开动画结束时的回调
       */
      this.$emit('opened')
    },
    close() {
      /**
       * Drawer 关闭的回调
       */
      this.$emit('close')
    },
    closed() {
      /**
       * Drawer 关闭动画结束时的回调
       */
      this.$emit('closed')
    },
  },
}
</script>

<style lang="scss" scoped>
.oce-drawer {
  width: 30%;
  position: absolute;
  left: auto;
  height: 100%;
  overflow: hidden;

  ::v-deep .el-drawer__header {
    font-size: 16px;
    height: 40px;
    margin: 0;
    line-height: 24px;
    padding: 8px;
    background: #f5f7fa;
    border-bottom: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
  }

  ::v-deep .el-drawer__body {
    height: calc(100% - 40px);
  }
}
</style>
